<!-- A modal with some images -->
<section class="css-modal css-modal--gallery" id="modal-gallery" tabindex="-1"
    role="dialog" aria-labelledby="modal-label" aria-hidden="true"
    data-cssmodal-resize="true">
  <div class="css-modal_inner">
    <div class="css-modal_content">
      <div class="css-modal_spinner">
        <div class="css-modal_spinner_outer"></div>
        <div class="css-modal_spinner_inner"></div>
      </div>

      <!-- Detail view of the gallery -->
      <div class="css-modal_detail" aria-live="polite" aria-atomic="false"></div>

      <ul class="css-modal--gallery_navigation">
        <li><a title="Previous" class="css-modal--gallery_navigation_prev" href="#">Previous</a></li>
        <li><a title="Next" class="css-modal--gallery_navigation_next" href="#">Next</a></li>
      </ul>

    </div>
    <div class="css-modal--gallery_caption"></div>

    <footer class="css-modal_footer">
      <ul class="css-modal_content-list is-active" aria-hidden="true">
        <li data-caption="The last time I felt it was in the presence of my old master.">
          <a href="#modal-gallery/0">
            <img alt="The last time I felt it was in the presence of my old master."
                src="test/img/cat-small.jpg"
                data-src-fullsize="test/img/cat.jpg">
          </a>
        </li>
        <li data-caption="I'm getting too old for this sort of thing.">
          <a href="#modal-gallery/1">
            <img alt="I'm getting too old for this sort of thing."
                src="test/img/cat-small.jpg"
                data-src-fullsize="test/img/cat.jpg">
          </a>
        </li>
        <li data-caption="Don't underestimate the Force.">
          <a href="#modal-gallery/2">
            <img alt="Don't underestimate the Force."
                src="test/img/cat-small.jpg"
                data-src-fullsize="test/img/cat.jpg">
          </a>
        </li>
        <li data-caption="Alderaan is peaceful. We have no weapons.">
          <a href="#modal-gallery/3">
            <img alt="Alderaan is peaceful. We have no weapons."
                src="test/img/cat-small.jpg"
                data-src-fullsize="test/img/cat.jpg">
          </a>
        </li>
        <li data-caption="Escape is not his plan.">
          <a href="#modal-gallery/4">
            <img alt="Escape is not his plan."
                src="test/img/cat-small.jpg"
                data-src-fullsize="test/img/cat.jpg">
          </a>
        </li>
        <li data-caption="The last time I felt it was in the presence of my old master.">
          <a href="#modal-gallery/5">
            <img alt="The last time I felt it was in the presence of my old master."
                src="test/img/cat-small.jpg"
                data-src-fullsize="test/img/cat.jpg">
          </a>
        </li>
        <li data-cation="I'm getting too old for this sort of thing.">
          <a href="#modal-gallery/6">
            <img alt="I'm getting too old for this sort of thing."
                src="test/img/cat-small.jpg"
                data-src-fullsize="test/img/cat.jpg">
          </a>
        </li>
        <li data-caption="Escape is not his plan.">
          <a href="#modal-gallery/7">
            <img alt="Escape is not his plan."
                src="test/img/cat-small.jpg"
                data-src-fullsize="test/img/cat.jpg">
          </a>
        </li>
        <li data-caption="Escape is not his plan.">
          <a href="#modal-gallery/8" data-iframe>
            <img alt="Escape is not his plan."
                src="test/img/cat-small.jpg"
                data-src-fullsize="//player.vimeo.com/video/113287920">
          </a>
        </li>
      </ul>
    </footer>
  </div>

  <!-- Use Hash-Bang to maintain scroll position when closing modal -->
  <a href="#!" class="css-modal_close" title="Close this modal" data-close="Close">&times;</a>
</section>
